<template>
	<view class="cars">
		<view class="jia" @click="handleJia">+</view>
		<view class="item" @click="handleJia">
			<view class="item-content">
				<image :src="src" mode="cover"></image>
			</view>
			<view class="flex">
				<view class="name">玛莎拉蒂【空闲】</view>
				<view style="color: rgb(176, 176, 180);">行驶证：451369184035</view>
				<view class="stock-remaining"> 车牌号：aaaaaaa</view>
			</view>
		</view>
		<view class="item" @click="handleJia">
			<view class="item-content">
				<image :src="src" mode="cover"></image>
			</view>
			<view class="flex">
				<view class="name">玛莎拉蒂【空闲】</view>
				<view style="color: rgb(176, 176, 180);">行驶证：451369184035</view>
				<view class="stock-remaining"> 车牌号：aaaaaaa</view>
			</view>
		</view>
		<view class="item" @click="handleJia">
			<view class="item-content">
				<image :src="src" mode="cover"></image>
			</view>
			<view class="flex">
				<view class="name">玛莎拉蒂【空闲】</view>
				<view style="color: rgb(176, 176, 180);">行驶证：451369184035</view>
				<view class="stock-remaining"> 车牌号：aaaaaaa</view>
			</view>
		</view>
		<view class="item" @click="handleJia">
			<view class="item-content">
				<image :src="src" mode="cover"></image>
			</view>
			<view class="flex">
				<view class="name">玛莎拉蒂【空闲】</view>
				<view style="color: rgb(176, 176, 180);">行驶证：451369184035</view>
				<view class="stock-remaining"> 车牌号：aaaaaaa</view>
			</view>
		</view>
		<view class="item" @click="handleJia">
			<view class="item-content">
				<image :src="src" mode="cover"></image>
			</view>
			<view class="flex">
				<view class="name">玛莎拉蒂【空闲】</view>
				<view style="color: rgb(176, 176, 180);">行驶证：451369184035</view>
				<view class="stock-remaining"> 车牌号：aaaaaaa</view>
			</view>
		</view>
		<view class="item" @click="handleJia">
			<view class="item-content">
				<image :src="src" mode="cover"></image>
			</view>
			<view class="flex">
				<view class="name">玛莎拉蒂【空闲】</view>
				<view style="color: rgb(176, 176, 180);">行驶证：451369184035</view>
				<view class="stock-remaining"> 车牌号：aaaaaaa</view>
			</view>
		</view>
		<view class="item" @click="handleJia">
			<view class="item-content">
				<image :src="src" mode="cover"></image>
			</view>
			<view class="flex">
				<view class="name">玛莎拉蒂【空闲】</view>
				<view style="color: rgb(176, 176, 180);">行驶证：451369184035</view>
				<view class="stock-remaining"> 车牌号：aaaaaaa</view>
			</view>
		</view>
		<view class="item" @click="handleJia">
			<view class="item-content">
				<image :src="src" mode="cover"></image>
			</view>
			<view class="flex">
				<view class="name">玛莎拉蒂【空闲】</view>
				<view style="color: rgb(176, 176, 180);">行驶证：451369184035</view>
				<view class="stock-remaining"> 车牌号：aaaaaaa</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '../../../static/images/car.jpg',
			};
		},
		methods: {
			handleJia() {
				this.$modal.showToast('模块建设中~')
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f6f7;
	}

	.cars {
		// background-color: aquamarine;

		.jia {
			position: fixed;
			color: white;
			padding-left: 28rpx;
			font-size: 80px;
			line-height: 150rpx;
			background-color: aqua;
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			right: 30rpx;
			bottom: 30rpx;
			background-color: rgb(0, 187, 181);
		}

		.item {
			background-color: white;
			display: flex;
			margin: 15rpx;
			border-radius: 6%;
			border: rgb(209, 209, 209) 1px solid;
			box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);

			.item-content {
				margin: 20rpx;
				width: 250rpx;
				height: 250rpx;

				image {
					width: 250rpx;
					height: 250rpx;
					background-size: cover;
				}
			}

			.flex {
				padding-right: 20rpx;
				margin-top: 20rpx;
				width: 350rpx;
				height: 250rpx;
				flex-direction: column;

				.name {
					height: 200rpx;
					font-weight: 900;
					font-size: 15px;
					line-height: 1.2;
				}

				.stock-remaining {
					height: 50rpx;
					line-height: 50rpx;
					color: rgb(176, 176, 180);
				}
			}
		}
	}
</style>